<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>curvyCorners Demos</title>

<style type="text/css">
/*<![CDATA[*/

html {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #CEF;
  margin: 20px;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: #585858;
}
h2 {
  font-size:medium;
}

a {
  color: #585858;
}

abbr {
  border-bottom: dotted #0A0 1px;
}

/*]]>*/
</style>
</head>
<body>
<h1>curvyCorners Examples</h1>
<h2><a href="demo1.html">Example 1</a></h2>
<p>
This example uses the orignal JavaScript invocation method and will round
all 4 corners of the example DIV applying a 20 pixel radius while preserving
a 3 pixel white border. The DIV has fluid height and width.</p>

<h2><a href="demo2.html">Example 2</a></h2>
<p>This example uses the orignal JavaScript invocation method and will round
all 4 corners of the example DIV applying a 20 pixel radius while preserving
the background image. The DIV has fixed height and width.</p>

<h2><a href="demo3.html">Example 3</a></h2>
<p>This example uses the orignal JavaScript invocation method and will round
all 4 corners of the example DIV applying a 15 pixel radius while preserving
the background image and a 5 pixel black border. The DIV has fixed height
and width.</p>

<h2><a href="demo4.html">Example 4</a></h2>
<p>This example is the same as example 1 but uses the new
<abbr title="Cascading Style Sheet">CSS</abbr> invocation
method. The example uses native border-radius support if available in the
browser, otherwise uses curvyCorners. Until all the modern browsers
support CSS3 syntax, you must enter all three border-radius
CSS rules as shown in the example.</p>

<h2><a href="demo5.html">Example 5 (tabs)</a></h2>
<p>This shows a number of examples using the CSS invocation method,
including fluid-width rounded tabs and the dynamic redrawing available
as from beta 2.0.1.</p>

<h2><a href="demo6.html">Example 6</a></h2>
<p>This example uses the new CSS invocation method and will round all 4 corners
of the example DIV applying a 20 pixel radius while preserving left and
right 3px white border and top and bottom 3px green border. The DIV has
fluid height and width.</p>

<h2><a href="demo7.html">Example 7</a></h2>
<p>Thanks to Simó Albert, curvyCorners can now handle corners of different
non-zero radii at top and bottom while preserving an image background.
This example gives a comprehensive illustration.</p>
</body>
</html>
